<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动定时关闭消息框</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .alert {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            min-width: 300px;
            max-width: 600px;
            transform: translate(-50%, -50%);
            z-index: 99999;
            text-align: center;
            padding: 15px;
            border-radius: 3px;
        }

        .alert-success {
            color: #3c763d;
            background-color: #dff0d8;
            border-color: #d6e9c6;
        }

        .alert-info {
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1;
        }

        .alert-warning {
            color: #130f0e;
            background-color: #fcf8e3;
            border-color: #faebcc;
        }

        .alert-danger {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }
    </style>
</head>
<body>
<input type="button" value="warning" onclick="warning_prompt()">
<input type="button" value="success" onclick="success_prompt()">
<input type="button" value="fail" onclick="fail_prompt()">
<input type="button" value="info" onclick="info_prompt()">
<div class="alert">this is the alert infomation</div>
<script>
    /**
     * 弹出式提示框，默认1.2秒自动消失
     * @param message 提示信息
     * @param style 提示样式，有alert-success、alert-danger、alert-warning、alert-info
     * @param time 消失时间
     */
    var prompt = function(message, style, time) {
        style = (style === undefined) ? 'alert-success' : style;
        time = (time === undefined) ? 120000 : time;
        $('div.alert').addClass(style).html(message).show().delay(time).fadeOut();
    };

    // 成功提示
    var success_prompt = function(message, time) {
        prompt(message, 'alert-success', time);
    };

    // 失败提示
    var fail_prompt = function(message, time) {
        prompt(message, 'alert-danger', time);
    };

    // 提醒
    var warning_prompt = function(message, time) {
        prompt(message, 'alert-warning', time);
    };

    // 信息提示
    var info_prompt = function(message, time) {
        prompt(message, 'alert-info', time);
    };
</script>
</body>
</html>